<template>
  <div class="flex items-center status-wrapper">
    <span :class="[record.status == '0' ? 'close' : 'open', 'status-icon']"></span>
    <span>{{ record.statusStr }}</span>
  </div>
</template>
<script setup>
  defineProps({
    record: {
      type: Object,
      default: () => {},
    },
  })
</script>
<style lang="less" scoped>
  .status-wrapper {
    height: 28px;
    .status-icon {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 6px;
      &.open {
        background: #00b42a;
      }
      &.close {
        background: #ea0000;
      }
    }
  }
</style>
